<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <base th:href="@{/}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <link rel="stylesheet" href="static/css/minireset.css"/>
    <link rel="stylesheet" href="static/css/common.css"/>
    <link rel="stylesheet" href="static/css/cart.css"/>
</head>
<body>
<div id="app">
    <div class="header">
        <div class="w">
            <div class="header-left">
                <a href="index.html">
                    <img src="static/img/logo.gif" alt=""/></a>
                <h1>我的购物车</h1>
            </div>
            <div class="header-right" th:unless="${session.existUser== null}">
                <h3>欢迎<span th:text="${session.existUser.userName}">张总</span>光临尚硅谷书城</h3>
                <div class="order"><a href="../order/order.html">我的订单</a></div>
                <div class="destory"><a href="index.html">注销</a></div>
                <div class="gohome">
                    <a href="index.html">返回</a>
                </div>
            </div>
        </div>
    </div>
    <div class="list">
        <div class="w">
            <table>
                <thead>
                <tr>
                    <th>图片</th>
                    <th>商品名称</th>

                    <th>数量</th>
                    <th>单价</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
                </thead>
                <!-- 购物车为空时 -->

                <tbody v-if="cart == null || cart.totalCount == 0">
                <tr>
                    <td colspan="6">
                        <a href="index.html">购物车空空如也，请抓紧购物吧!!!!</a>
                    </td>
                </tr>
                </tbody>
                <tbody v-else >
                <tr v-for = "item in cart.cartItemMap">
                    <td>
                        <img :src="item.imgPath" alt=""/>
                    </td>
                    <td v-text="item.bookName">活着</td>
                    <td>
                        <span class="count">
                            <a @click.prevent="cartItemDecreaseCount(item.bookId,item.count)">-</a></span>
                        <input :value="item.count" class="count-num" type="text" @change="updateCartItemCount(item.bookId)"/>
                        <span class="count">
                            <a @click.prevent="cartItemIncreaseCount(item.bookId)">+</a>
                        </span>
                    </td>
                    <td v-text="item.price">36.8</td>
                    <td v-text="item.amount">36.8</td>
                    <td><a @click.prevent="deleteCartItem(item.bookId)">删除</a></td>
                </tr>

                </tbody>
            </table>
            <div class="footer">
                <div class="footer-left">
                    <a @click.prevent="removeCart()" class="clear-cart">清空购物车</a>
                    <a href="index.html">继续购物</a>
                </div>
                <div class="footer-right" v-if="cart == null || cart.totalCount == 0">
                    <div>共<span>0</span>件商品</div>
                    <div class="total-price">总金额<span>0.0</span>元</div>
                    <a class="pay" href="#">去结账</a>
                </div>
                <div class="footer-right" v-else >
                    <div>共<span v-text="cart.totalCount">3</span>件商品</div>
                    <div class="total-price">总金额<span v-text="cart.totalAmount">99.9</span>元</div>
                    <a class="pay" th:href="@{/protect/orderClient(method=checkOut)}">去结账</a>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="w">
            <div class="top">
                <ul>
                    <li>
                        <a href="">
                            <img src="static/img/bottom1.png" alt=""/>
                            <span>大咖级讲师亲自授课</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="static/img/bottom.png" alt=""/>
                            <span>课程为学员成长持续赋能</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="static/img/bottom2.png" alt=""/>
                            <span>学员真是情况大公开</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="content">
                <dl>
                    <dt>关于尚硅谷</dt>
                    <dd>教育理念</dd>
                    <!-- <dd>名师团队</dd>
                    <dd>学员心声</dd> -->
                </dl>
                <dl>
                    <dt>资源下载</dt>
                    <dd>视频下载</dd>
                    <!-- <dd>资料下载</dd>
                    <dd>工具下载</dd> -->
                </dl>
                <dl>
                    <dt>加入我们</dt>
                    <dd>招聘岗位</dd>
                    <!-- <dd>岗位介绍</dd>
                    <dd>招贤纳师</dd> -->
                </dl>
                <dl>
                    <dt>联系我们</dt>
                    <dd>http://www.atguigu.com</dd>
                    <dd></dd>
                </dl>
            </div>
        </div>
        <div class="down">
            尚硅谷书城.Copyright ©2015
        </div>
    </div>
</div>

</body>
<script src="static/script/vue.js"></script>
<script src="static/script/axios.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            cart:{}
        },
        methods:{
            removeCart(){
                var _this = this;
                if(this.isLogin()){
                    var confirm = window.confirm("你确定清空购物车吗?");
                    if(!confirm){
                        return;
                    }
                    axios({
                        method:"get",
                        url:"protect/cart",
                        params:{
                            method:"removeCart"
                        }
                    }).then(function (res) {
                        var data = res.data;
                        if(data.flag){
                            _this.selectCart();
                        }else {
                            alert("购物车清空失败!");
                        }
                    })
                }else {
                    alert("你还没有登录!");
                }
            },
            deleteCartItem(bookId){
                var _this=this;
                if(this.isLogin()){
                    var confirm = window.confirm("你确定删除吗?");
                    if(!confirm){
                        return;
                    }
                    axios({
                        method:"get",
                        url:"protect/cart",
                        params:{
                            method:"deleteCartItem",
                            bookId:bookId
                        }
                    }).then(function (res) {
                        var data = res.data;
                        if(data.flag){
                            _this.selectCart();
                        }else {
                            alert("购物车项删除失败!");
                        }
                    })
                }else {
                    alert("你还没有登录!");
                }
            },
            cartItemDecreaseCount(bookId,count){
                var _this = this;
                if(count == 1){
                    _this.deleteCartItem(bookId);
                    return;
                }
                if(this.isLogin()){
                    axios({
                        method:"get",
                        url:"protect/cart",
                        params:{
                            method:"cartItemDecreaseCount",
                            bookId:bookId
                        }
                    }).then(function (res) {
                        var data = res.data;
                        if(data.flag){
                            _this.selectCart();
                        }else {
                            alert("数量减1失败!");
                        }
                    })
                }else {
                    alert("你还没有登录!");
                }
            },
            cartItemIncreaseCount(bookId){
                var _this = this;
                if(this.isLogin()){
                    axios({
                        method:"get",
                        url:"protect/cart",
                        params:{
                            method:"cartItemIncreaseCount",
                            bookId:bookId
                        }
                    }).then(function (res) {
                        var data = res.data;
                        if(data.flag){
                            _this.selectCart();
                        }else {
                            alert("数量加1失败!");
                        }
                    })
                }else {
                    alert("你还没有登录!");
                }
            },
            updateCartItemCount(bookId){
                //当前事件的value值
                var newCount = event.target.value;
                var _this = this;
                if(this.isLogin()){
                    axios({
                        method:"get",
                        url:"protect/cart",
                        params: {
                            method:"updateCartItemCount",
                            bookId:bookId,
                            newCount:newCount
                        }
                    }).then(function (res) {
                        var data = res.data;
                        if(data.flag){
                            _this.selectCart();
                        }else {
                            alert("修改失败!");
                        }
                    })
                }else{
                    alert("你还没有登录!");
                }

            },
            isLogin(){
                var existUserStr = sessionStorage.getItem("existUser");
                if(existUserStr == null){
                    return false;
                }
                return true;
            },
            selectCart() {
                var _this = this;
                if(this.isLogin()){
                    axios({
                        method:"get",
                        url:"protect/cart",
                        params:{
                            method:"selectCart"
                        }
                    }).then(function (res) {
                        var data = res.data;
                        if(data.flag){
                            _this.cart = data.data;
                        }
                    })
                }else {
                    alert("你还没有登录!");
                }
            },
        },
        mounted(){
            this.selectCart();
        }
    });
</script>
</html>
